<template>
  <!--自定义查询区域-->
  <div class="jeecg-basic-table jeecg-basic-table-form-container">
    <a-form @keyup.enter.native="searchQuery">
      <a-row :gutter="8" type="flex">
        <a-col flex="350px">
          <a-form-item label="预订日期" :label-col="{ style: { width: '80px' } }" :wrapper-col="{ style: { width: '270px' } }">
            <a-date-picker
              v-model:value="queryParam.beginDate"
              :disabled-date="disabledStartDate"
              valueFormat="YYYY-MM-DD"
              placeholder=""
              style="width: 120px"
            />
            ~
            <a-date-picker
              v-model:value="queryParam.endDate"
              :disabled-date="disabledEndDate"
              valueFormat="YYYY-MM-DD"
              placeholder=""
              style="width: 120px"
            />
          </a-form-item>
        </a-col>

        <a-col flex="200px">
          <a-form-item label="客户姓名" :label-col="{ style: { width: '80px' } }">
            <a-input id="name" v-model:value="queryParam.name" />
          </a-form-item>
        </a-col>

        <a-col flex="200px">
          <a-form-item label="客户电话" :label-col="{ style: { width: '80px' } }">
            <a-input id="tel" v-model:value="queryParam.tel" />
          </a-form-item>
        </a-col>

        <a-col flex="200px">
          <a-form-item label="客户经理" :label-col="{ style: { width: '80px' } }">
            <a-input id="manager" v-model:value="queryParam.manager" />
          </a-form-item>
        </a-col>

        <a-col flex="auto" style="float:right; width:90px; margin-right: 0px;">
          <span style="float: right;overflow: hidden;" class="table-page-search-submitButtons">
            <a-button type="primary" @click="searchQuery" preIcon="ant-design:search">查询</a-button>
          </span>
        </a-col>

      </a-row>
    </a-form>
  </div>

  <BasicTable @register="registerTable" :indentSize="5"></BasicTable>
</template>

<script lang="ts" name="cater-logeReserve" setup>
import { ref, computed, unref, reactive, nextTick } from "vue";
import { BasicTable } from "/@/components/Table";
import { useModal } from "/@/components/Modal";
import { useListPage } from "/@/hooks/system/useListPage";
import { columns, searchFormSchema } from "./logeReserve.data";
import { momentSearchQueryDate } from "/@/utils/dateUtil";
import moment from "dayjs";
import { defHttp } from "/@/utils/http/axios";
import { filterObj } from "/@/utils/common/compUtils";

//初始化 -------------------------------------------------------------
//定义查询表单，查询条件
const queryParam = reactive<any>({
  beginDate : momentSearchQueryDate('sub'),
  endDate: momentSearchQueryDate('add'),
  name: "",
  tel:"",
  mealTime: "",
  manager:""
});

const resetParam = { ...queryParam };

//限制查询日期，开始日期不能大于结束日期
function disabledStartDate(beginDate) {
  const endDate = queryParam.endDate;
  if (!beginDate || !endDate) {
    return false;
  }
  return beginDate.valueOf() > moment(endDate).valueOf()
}

function disabledEndDate(endDate) {
  const beginDate = queryParam.beginDate;
  if (!endDate || !beginDate) {
    return false;
  }
  return moment(beginDate).valueOf() > endDate.valueOf();
}

//注册table数据
const loading = ref<boolean>(false);
const dataSource = ref<any[]>([]);
const summaryData = ref<any[]>([]);
const { prefixCls, tableContext } = useListPage({
  tableProps: {
    rowKey: "id",
    size: "small",
    dataSource: dataSource,
    columns: columns,
    pagination: false,
    isTreeTable: true,
    striped: true,
    useSearchForm: false,
    bordered: true,
    showTableSetting: false,
    showActionColumn: false,
    resizeHeightOffset: 40,
    showSummary: true,
    summaryData: summaryData,
    onExpand: onExpand,
    beforeFetch: (params) => Object.assign({ }, unref(params)),
  },
});

//注册table数据
const [registerTable, { reload, collapseAll }] = tableContext;
const url = "/reportLoge/logeReserveDate";

async function loadData(params) {
  loading.value = true;
  let result = await defHttp.get({ url, params });
  loading.value = false;
  return result;
}

/** 点击展开图标时触发 */
async function onExpand(isExpand, rowData) {
  if (isExpand && rowData.hasChildren === "true" && rowData.children.length === 0) {
    let params = { ...queryParam, parent_id: rowData.id, type: rowData.type };
    const res = await loadData(filterObj(params));
    rowData.children = res.rows;
  }
}

async function loadRootData() {
  const res = await loadData(filterObj(queryParam));
  if (res) {
    dataSource.value = res.rows;
    summaryData.value = res.footer;
  } else {
    dataSource.value = [];
    summaryData.value = [];
  }
}

//
function searchQuery() {
  //reload();
  loadRootData();
  nextTick(collapseAll);
}

function searchReset() {
  Object.assign(queryParam, resetParam);
  loadRootData();
}

//默认执行查询
searchQuery();

</script>
<style scoped>

</style>
